import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
import RouterView from "../router";
import aRoutes from "../router/aRoutes";

const DemoBox = styled.div`
  display: flex;
  font-size: 12px;
  .menu {
    a {
      font-size: 12px;
      color: #000;
      display: block;
      &.active {
        color: red;
      }
    }
  }
`;

const A = () => {
  return (
    <DemoBox>
      <div className="menu">
        <NavLink to="/a/a1">展示A1内容</NavLink>
        <NavLink to="/a/a2">展示A2内容</NavLink>
        <NavLink to="/a/a3">展示A3内容</NavLink>
      </div>
      <div className="view">
        <RouterView routes={aRoutes} />
      </div>
    </DemoBox>
  );
};

export default A;
